<script type="text/html" id="horiTable">
  <table>
    <tr>
      <th v-for="h in data.header">{{h}}</th>
    </tr>
    <tr v-for="row in data.body">
      <td v-for="c in row.data">{{c}}</td>

      <td v-for="op in row.op">
        <a :href="op.url" target="_blank">{{op.name}}</a>
      </td>
    </tr>
  </table>
</script>
<script>
  const HoriTable = {
    name: 'hori-table',
    template: '#horiTable',
    props: ['data'],
    computed: {
    },
  }
</script>

<script>
  let hTableAddOp = (table, name, url) => {
    table.body.forEach((row) => {
      row.op = row.op || []

      row.op.push({
        name: name,
        url: url(row),
      })
    })
  }
</script>
